<!-- 中转管理-签出  -->
<template>
  <div class="page-container">
    <page_breadcrumb :getKeyMethod="init_table_model" @change="change_table_model" pageOption />
    <ex_super_table_page v-bind="option" ref="SuperTablePage" :autoLoad="false" >

    </ex_super_table_page>

    <ex_super_dialog_form ref="formDialogCheckout" :title="$tt('label_checkout_confirm')" v-bind="dialogBind"
      @afterSubmitSuccess="checkoutSuccess">
      <template v-slot:dialog_bottom>
        <div class="flex_row_center card margin-small">
          <i class="el-icon-warning color_warning el-icon--left icon-small" />
          <p>{{ $tt('text_outbound_confirm_tip_info') }}</p>
        </div>
      </template>

    </ex_super_dialog_form>


  </div>
</template>
<script>

import superTablePageFunction from '@/mixin/super-table-page-function';
import router_params from '@/mixin/router_params';
import page_table_model_manage from '@/mixin/page_table_model_manage';

export default {
  title: "title_transfer_checkout",
  mixins: [superTablePageFunction, router_params, page_table_model_manage],
  data() {
    return {
      orderData: null,

      orderEditDisabled: false,



      option: {
        search: {
          default: { code: '' },
          model: [
            {
              label: "", key: "code",
              keylist: [
                { label: 'label_inbound_code', value: 'code' },
              ],
            },
          ],
        },
        actionExtra: [
          { label: 'label_checkout_confirm', attrs: { type: "primary" }, click: this.clickCheckout },

        ],

        table: {
          autoPage: false, specialStyle: false,
          attrs: { 'cell-class-name': this.cellClassName, 'span-method': this.objectSpanMethod },
          url: '/wms-api/inbound/WmsInboundTransitCheckoutDetailRpc/selectBoxDetail.json',
          urlDataHandle: this.dataHandle,
          model: this.init_table_model(),
        },
      },
      dialogBind: {
        customClass: 'dialog_auto',
        submitUrl: '/wms-api/inbound/WmsInboundTransitCheckoutDetailRpc/checkout.json',
        form: {
          itemClass: "form_item_mini", inputClass: "form_input_small ",
          formClass: "form_mini_col2",
          inline: true,
          model: [
            { key: 'receivingCode', label: 'label_inbound_code', type: 'text', inputClass: "bold ", },
            { key: 'supplyName', label: 'label_logistics_supplier', type: 'text', inputClass: "bold ", },
            
            { key: 'planBoxNumber', label: 'label_plan_checkout_box_count', type: 'text', inputClass: "bold ", },
            { key: 'planPieceNumber', label: 'label_plan_checkout_sku_count', type: 'text', inputClass: "bold ", },
            { key: 'actualBoxNumber', label: 'label_actual_checkout_box_count', type: 'text', inputClass: "bold ", },
            { key: 'actualPieceNumber', label: 'label_actual_checkout_sku_count', type: 'text', inputClass: "bold ", },
            { key: 'checkoutTotalWeight', label: 'label_checkout_weight', append: 'KG', appendClass: 'input_slot_div_mini' },
            { key: 'checkoutTotalVolume', label: 'label_checkout_volume', append: 'M³', appendClass: 'input_slot_div_mini' },

            { key: 'trackingNumber', label: 'label_track_code', itemClass: "form_item_default", },

          ],
          rules: {
            checkoutTotalWeight: { required: true, message: this.$tt('tip_can_no_empty'), trigger: 'blur' },
            checkoutTotalVolume: { required: true, message: this.$tt('tip_can_no_empty'), trigger: 'blur' },

          },
        }
      },
      skuUrlList: [],

    };
  },
  computed: {
    isPallet: function () {
      return this.orderData && this.orderData.isPallet == 'Y'
    },
    TOB() {
      return this.orderData && this.orderData.bizType == 'TOB'
    },

  },
  methods: {
    option_table_model() {
      return [
        {
          key: 'palletNo', label: 'label_pallet_code', 'min-width': 140, 'show-overflow-tooltip': true,
          if: () => this.isPallet
        },
        // { key: 'boxNumber', label: 'label_box_order_number', 'width': 100, 'show-overflow-tooltip': true, },
        { key: 'boxNo', label: 'label_box_code', 'min-width': 140, 'show-overflow-tooltip': true, },
        // { key: 'isMixed', label: 'label_box_is_mixed', attrs: { width: 80, formatter: (r, c, v, i) => this.$enumShow(v, "YesOrNoEnum"), } },
        // { key: 'isMeasure', label: 'label_box_is_measure', attrs: { width: 80, formatter: (r, c, v, i) => this.$enumShow(v, "YesOrNoEnum"), } },
        // { key: 'receivingType', label: 'label_receiving_type', attrs: { formatter: (r, c, v, i) => this.$enumShow(v, "ReceivingTypeEnum") } },
        { key: "skuBarcode", label: "label_sku_code", 'min-width': 120, 'show-overflow-tooltip': true, },
        { key: 'skuName', label: 'label_sku_name', 'min-width': 120, 'show-overflow-tooltip': true, },
        {
          key: 'skuUrl', label: 'label_sku_image', 'width': 120,
          render: (h, { row }) => (<ex_image_view class="page_table_image" src={row.skuUrl} lazy fit="fill" preview-src-list={this.skuUrlList} />)
        },
        {
          key: 'receivingStatus', label: 'label_receiving_status', 'show-overflow-tooltip': true, 'width': 100,
          formatter: (r, c, v, i) => this.$enumShow(v, "ReceivingStatusEnum")
        },
        {
          key: 'checkoutStatus', label: 'label_checkout_staus', 'show-overflow-tooltip': true, 'width': 100,
          formatter: (r, c, v, i) => this.$enumShow(v, "CheckoutStatusEnum")
        },
        { key: 'receivingPallet', label: 'label_receiving_pallet_number', 'width': 100, if: () => this.isPallet, },
        {
          key: 'checkoutPallet', label: 'label_checkout_pallet_number', slot: 'checkoutBox', 'min-width': 180, keyShowForce: [true],
          if: () => this.isPallet,
          render:(h,{row,column})=>{
            const item = row[column.property]
            if(this.disabledEdit(row))return 
            return (<el-input-number value={item} class='w_fill' min={0}  max={1} onChange={e=>this.changeCheckoutPallet(e,row)} />)
          },
        },
        { key: 'receivingBox', label: 'label_receiving_box_number', 'width': 100, if: () => !this.isPallet, },
        {
          key: 'checkoutBox', label: 'label_checkout_box_count', slot: 'checkoutBox', 'min-width': 180, keyShowForce: [true],
          if: () => !this.isPallet,
          render:(h,{row,column})=>{
            const item = row[column.property]
            if(this.disabledEdit(row))return item
            return (<el-input-number value={item} class='w_fill' min={0}  max={1} onChange={e=>this.changeCheckoutBox(e,row)} />)
          },
        },
        { key: 'receivingQty', label: 'label_receiving_number', 'width': 100, },
        {
          key: 'acceptanceQty', label: 'label_acceptance_number', 'width': 100,
          formatter: (r, c, v, i) => r.acceptanceStatus == 'NOT_ACCEPTANCE' ? this.$tt('data_temp_none') : v
        },
        { key: 'checkoutQty', label: 'label_checkout_sku_count', 'width': 100, },
      ]
    },
    init_data_default(into_params) {
      let params = into_params
      let search = params
      if (!_.isEmpty(search)) {
        this.orderData = null
        this.$refs['SuperTablePage'].setSearchData(Object.assign({}, this.$refs['SuperTablePage'].getSearchData(), search))
        let _keys = Object.keys(search)
        this.option.search.model.forEach(it => {
          if (it.keylist) {
            let _new_key = _.head(_.intersection(it.keylist.map(_k => _k.value), _keys))
            if (_new_key) it.key = _new_key
          }
        })
        this.$nextTick(() => {
          this.$refs['SuperTablePage'].loadDataForSearch()
        })
      }
    },
    isBoxReceiving(row) {
      return row.boxReceivingStatus == 'RECEIVING_COMPLETED'
    },
    isBoxCheckout(row) {
      return row.boxCheckoutStatus == 'CHECKOUT_COMPLETED'
    },
    isHasReceiving(row) {
      return row.receivingStatus == 'RECEIVING_COMPLETED'
    },
    isHasCheckout(row) {
      return row.checkoutStatus == 'CHECKOUT_COMPLETED'
    },
    disabledEdit(row) {
      return !this.isBoxReceiving(row) || this.isBoxCheckout(row) || this.orderEditDisabled
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (['boxNumber', 'boxReceivingStatus', 'boxNo', 'checkoutBox', 'receivingBox'].includes(column.property)) {
        return { rowspan: row.rowspanBox, colspan: 1 }
      } else if (['receivingPallet', 'checkoutPallet', 'palletNo'].includes(column.property)) {
        return { rowspan: row.rowspanPallet, colspan: 1 }
      }
    },
    cellClassName({ row, column, rowIndex, columnIndex }) {
      if (this.disabledEdit(row)) {
        return 'tableCell_disabled'
      }
      return 'tableCell_noHoverLight'
    },
    changeCheckoutPallet(number, row) {
      
      row._linkPallet.forEach(it => {
        it.checkoutPallet = number
        it.checkoutBox = number
        it.checkoutQty = number ? it.useQty : 0
      })
    },
    changeCheckoutBox(number, row) {
      row._linkBox.forEach(it => {
        it.checkoutPallet = number
        it.checkoutBox = number
        it.checkoutQty = number ? it.useQty : 0
      })
    },
    dataHandle(res) {
      if (!res.data || !res.data.receivingCode || !res.data.boxDetailList || !res.data.boxDetailList.length) {
        this.orderData = null
        this.skuUrlList = []
        this.$message.warning(this.$tt('tip_search_no_data'))
        return []
      }

      this.orderData = res.data

      const _list = res.data.boxDetailList
      this.skuUrlList = _list.map(it => it.skuUrl)
      //多次签出限制
      // this.orderEditDisabled = _list.some(it => this.isBoxCheckout(it))

      _list.sort((a, b) => {
        if (this.isPallet) {
          if (a.palletNo == b.palletNo) { }
          else if (a.palletNo > b.palletNo) { return 1 }
          else if (a.palletNo < b.palletNo) { return -1 }
        }
        if (a.boxNo == b.boxNo) { return 0 }
        else if (a.boxNo > b.boxNo) { return 1 }
        else if (a.boxNo < b.boxNo) { return -1 }
      }).map((it, i) => {

        // if (it.acceptanceStatus != 'NOT_ACCEPTANCE') {
        //   it.useQty = it.acceptanceQty
        // } else {
        //   it.useQty = it.receivingQty
        // }
        it.useQty = it.expectCheckoutQty


        it._linkBox = _list.filter(it2 => it2.boxNo == it.boxNo)
        if (it.rowspanBox == undefined) {
          it._linkBox.forEach(it2 => it2.rowspanBox = 0)
          it.rowspanBox = it._linkBox.length
        }
        if (this.isPallet) {

          it._linkPallet = _list.filter(it2 => it2.palletNo == it.palletNo)
          if (it.rowspanPallet == undefined) {
            it._linkPallet.forEach(it2 => it2.rowspanPallet = 0)
            it.rowspanPallet = it._linkPallet.length
          }
        }

        it.receivingBox = this.isBoxReceiving(it) ? 1 : 0
        if (it._linkPallet) it.receivingPallet = it._linkPallet.some(it => this.isBoxReceiving(it)) ? 1 : 0
        if (this.disabledEdit(it)) {

          it.checkoutBox = this.isBoxCheckout(it) ? 1 : 0
          if (it._linkPallet) it.checkoutPallet = it._linkPallet.some(it => this.isBoxCheckout(it)) ? 1 : 0

        } else {
          it.checkoutPallet = 1
          it.checkoutBox = it.receivingBox
          it.checkoutQty = it.checkoutBox ? it.useQty : 0
        }

      })
      this.refresh_table_visible()

      return _list
    },
    clickCheckout() {
      if (_.isEmpty(this.orderData)) {
        this.$message.error(this.$tt('tip_please_first_search'))
        return
      }
      let _hasList = this.getData().filter(it => this.isBoxReceiving(it))//排除未收货的
      if (_hasList.every(it => this.disabledEdit(it))) {
        return this.$message.error(this.$tt('tip_transfer_order_has_checkout'))
      }
      _hasList = _hasList.filter(it => !this.disabledEdit(it))

      let _list = _hasList.filter(it => it.checkoutBox)
      let _checkoutQty = _.reduce(_list, (sum, it) => sum + it.checkoutQty, 0)
      if (_checkoutQty == 0) return this.$message.error(this.$tt('tip_outbound_content_no_empty'))



      this.$refs.formDialogCheckout.show({
        receivingId: this.orderData.receivingId,
        receivingCode: this.orderData.receivingCode,
        planBoxNumber: _.uniqBy(_hasList, 'boxNo').length,
        planPieceNumber: _.reduce(_hasList, (sum, v) => sum + v.useQty, 0),
        actualBoxNumber: _.uniqBy(_list, 'boxNo').filter(it => it.checkoutBox).length,
        actualPieceNumber: _.reduce(_list, (sum, v) => sum + v.checkoutQty, 0),
        checkoutTotalWeight: null,
        checkoutTotalVolume: null,
        supplyName: this.orderData.supplyName,
        trackingNumber: null,
        boxDetailList: _list.map(it => {
          return {
            boxId: it.boxId,
            boxDetailId: it.boxDetailId,
            checkoutQty: it.checkoutQty,
          }
        }),
      }, true,)
    },
    checkoutSuccess() {
      this.reload()
      this.$emitPage("transfer=>checkout_list", 'reload')
      this.$emitPage("standard>inbound_manage", "reload")
    },

  }
};

</script>
<style></style>
